<template>
  <div class="container">
    <h3>组合式API</h3>
    <!-- 使用组件 -->
    <cart name="马踏飞燕"></cart>

    <counter></counter>

    <!-- title 是 prop attribute , 而 id 不是 prop aattribute  -->
    <context title="setup" id="setup">
      <!-- 通过插槽分发内容 -->
      Setup
    </context>

    <course title="第二学期课程" id="second">
      <!-- 为指定插槽分发内容 -->
      <template #footer>
        测试&lt;script setup&gt;
      </template>
    </course>

    <panda></panda>
    
  </div>
</template>

<script>
// 导入组件
import Cart from './components/Cart.vue';
import Counter from './components/Counter.vue';
import Context from './components/Context.vue';
import Course from './components/Course.vue';
import Panda from './components/Panda.vue';

// 导入 provide 函数
import { provide } from 'vue' ;

export default {
  name: 'App',
  // 注册组件
  components: {
    'cart': Cart ,
    'counter': Counter,
    'context': Context ,
    'course': Course ,
    'panda' : Panda
  },
  setup(){
    
    provide('location', 'North Pole');

    provide('geolocation', {
      longitude: 90,
      latitude: 135
    });

  }
}
</script>

<style scoped>
.container {
  border: 1px solid blue ;
  margin: 15px ;
}
h3 {
  margin: 15px ;
}
</style>
